<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()" >
      <el-form-item>
        <el-input v-if="this.isStudent!=1" v-model="dataForm.studentName" placeholder="请输入学生姓名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select  v-model="dataForm.examTime" filterable :multiple="false"  placeholder="请输入考试时间" clearable >
          <el-option v-for="item in uniqueExamTimes" :key="item.examTime" :label="item.examTime" :value="item.examTime"></el-option>
        </el-select>
      </el-form-item>
      
    <el-form-item>
      <el-input placeholder="请输入最大值" v-model="dataForm.maxValue" :min="dataForm.minValue" :max="100" class="input-with-input">
    <el-input v-model="dataForm.minValue" :min="0" :max="100" slot="prepend" placeholder="请输入最小值" >
      <template slot="append">至</template>
    </el-input>
  </el-input>
</el-form-item>
<!-- 
      <el-form-item label="数学成绩区间" >
      <el-input-number v-model="dataForm.minValue" :min="0" :max="100" placeholder="请输入最小值" clearable>
      </el-input-number>   至
      </el-form-item>
      <el-form-item>
      <el-input-number v-model="dataForm.maxValue" :min="dataForm.minValue" :max="100" placeholder="请输入最大值" clearable>
      </el-input-number>
    </el-form-item> -->
    <!-- <el-form-item>
        <el-select  v-model="this.score" filterable :multiple="false"  placeholder="请选择成绩" clearable >
          <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button @click="search()">查询</el-button>
        <el-button v-if="isAuth('test:studentscore:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button v-if="isAuth('test:studentscore:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length<=0">批量删除</el-button>
        
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;" :default-sort="{ prop:'examTime', order:'ascending' }" @sort-change="sortChange">
      <el-table-column type="selection" header-align="center" align="centet" width="50"></el-table-column>
      <el-table-column type="index"  header-align="center" align="center" label="序号"></el-table-column>
      <!-- <el-table-column prop="userId" header-align="center" align="center" label="学生ID"></el-table-column> -->
      <el-table-column prop="realName" header-align="center" align="center" label="学生姓名"></el-table-column>
      <el-table-column prop="maths" header-align="center" align="center" label="数学成绩/分"  sortable></el-table-column>
      <el-table-column   header-align="center" align="center" label="文科成绩/分" sortable :sort-method="sortScores" >
        <template slot-scope="scope">{{ scope.row.chinese+scope.row.english }}</template>
      </el-table-column>
      <!-- <el-table-column header-align="center" align="centet" width="80" label="成绩评价" >
        <template slot-scope="scope" >
          <el-tag v-if="scope.row.chinese+scope.row.english+scope.row.maths >= 240 && scope.row.chinese+scope.row.english+scope.row.maths <= 300" size="small" >优秀</el-tag>
          <el-tag v-else-if="scope.row.chinese+scope.row.english+scope.row.maths >= 180 && scope.row.chinese+scope.row.english+scope.row.maths < 240" size="small" >及格</el-tag>
          <el-tag v-else size="small" type="danger">不及格</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column prop="examTime" header-align="center" align="center" label="考试时间" sortable="custom"></el-table-column>
      <el-table-column v-if="this.isStudent!=1" fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope" >
          <el-button v-if="isAuth('test:studentscore:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button v-if="isAuth('test:studentscore:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10,20,50,100]"
    :page-size="pageSize" :total="totalPage" layout="total, sizes,prev,pager,next,jumper"></el-pagination>

    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<style>
  .el-input .el-input {
    width: 180px;
  }
  .input-with-input .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script></script>


<script>
import AddOrUpdate from './studentscore-add-or-update'
  export default{
    data(){
      return {
        options: [{
          value: '选项1',
          label: '优秀'
        }, {
          value: '选项1',
          label: '及格'
        }, {
          value: '选项1',
          label: '不及格'
        }],
        dataForm:{
          studentName:'',
          examTime:'',
          minValue:'',
          maxValue:''
        },
        pageIndex:1,
        pageSize:10,
        totalPage:0,
        dataListLoading:false,
        dataList:[],
        dataListSelections:[],
        addOrUpdateVisible:false,
        // asc正序 desc倒序
      isAsc: "asc",
        score:'',
        isStudent:''
      }
    },
    components:{
      AddOrUpdate
    },
    activated(){  
      this.getDataList()
    },
    computed: {//计算属性，是根据依赖关系进行缓存的计算
    uniqueExamTimes() {
      let uniqueArray = [];
      let seen = [];
      this.dataList.forEach(item => {
        if (!seen.includes(item.examTime)) {
          seen.push(item.examTime);
          uniqueArray.push(item);
        }
      });
      return uniqueArray;
    },
  },
    methods:{
      // 自定义排序方法，根据成绩之和排序
    sortScores(a, b) {
      const scoreA = a.chinese + a.english;  
      const scoreB = b.chinese + b.english;  
      return scoreA - scoreB;  
    },
      sortChange(column){//获取排序信息
        this.isAsc=column.order=="ascending"?'asc':'desc'
      this.getDataList()
    },
      //点击查询
      search() { //console.log(this.isStudent)
        this.pageIndex=1
        this.getDataList()
   //     if(this.score){
   //       this.dataList.some(StudentScoreDTO =>StudentScoreDTO.
   //     }
      },
      getDataList(){
        this.$http({
          url:this.$http.adornUrl('/test/studentScore/list'),
          method:'get',
          params:this.$http.adornParams({
            'page':this.pageIndex,
            'limit':this.pageSize,
            'studentName':this.dataForm.studentName,
            'examTime':this.dataForm.examTime,
            'isAsc':this.isAsc,
            'minValue':this.dataForm.minValue,
            'maxValue':this.dataForm.maxValue
          })
        }).then(({data})=>{
          if (data && data.code===0){
          //  console.log(data)
            this.dataList=data.page.list
            this.totalPage=data.page.totalCount
            this.isStudent=data.isStudent
          }else{
            this.dataList=[]
            this.totalCount=0
          }
          this.dataListLoading=false
        })
      },
      sizeChangeHandle(val){
        this.pageSize=val
        this.pageIndex=1
        this.getDataList()
      },
      currentChangeHandle(val){
        this.pageIndex=val
        this.getDataList()
      },
      selectionChangeHandle(val){ 
        this.dataListSelections=val
      },
      addOrUpdateHandle (id) {
       
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id,this.dataList)
        })
      },
      deleteHandle(id){
        var ids=id?[id]:this.dataListSelections.map(item=>{
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',') }]进行[${id?'删除':'批量删除'}]操作?`,'提示', {
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(()=>{
          this.$http({
            url:this.$http.adornUrl('/test/studentScore/delete'),
            method:'post',
            data:this.$http.adornData(ids,false)
          }).then(({data})=>{
            if (data && data.code===0){
              this.$message({
                message:'操作成功',
                type:'success',
                duration:1500, 
                onClose:()=>{
               this.getDataList()
                }
              })
            }else{
               this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>
